<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表块</title>
	</head>
	<style>
		  .list-block {
			  margin: 5px;
		       width: 200px; /* 设置宽度为200像素 */
		       height: 200px; /* 设置高度为200像素 */
		       background-color: #ccc; /* 设置背景颜色为灰色 */
		       border: 2px solid #000; /* 设置边框宽度为2像素，边框类型为实线，边框颜色为黑色 */
		       transition: background-color 0.3s; /* 设置背景颜色过渡效果的持续时间为0.3秒 */
			   display: flex;
			   justify-content: center;
			   align-items: center;
		  }
		  
		  .list-block:hover {
		    background-color: #ff0000;
		  }
		  
		  .fixed {
		      background-color: #ff0000;
		    }
	</style>
	<body>
		
		<div style="display: flex;justify-content: center;">
			<div class="list-block">
			  <!-- 列表块的内容 -->
			  1
			</div>
			
			<div class="list-block">
			  <!-- 列表块的内容 -->
			  2
			</div>
			
			<div class="list-block">
			  <!-- 列表块的内容 -->
			  3
			</div>
			
			<div class="list-block">
			  <!-- 列表块的内容 -->
			  4
			</div>
			
		</div>
		<script>
			
			 const blocks = document.querySelectorAll('.list-block');
			//  const fixedColor = '#ff0000';
			
			  blocks.forEach(block => {
			    block.addEventListener('click', () => {
			      blocks.forEach(b => b.classList.remove('fixed'));
			      block.classList.add('fixed');
			    });
			  });
			  
		</script>
	</body>
</html>